<template>
    <div class="xiugai">
        <div class="x-one">
            <div class="x-one-q">返回</div>
            <div class="x-one-qq">修改信息</div>
            <div class="x-one-q"></div>
        </div>
        <div class="x-two-q">用户姓名</div>
        <div class="x-two-qq">张三</div>
        <div class="x-two"></div>
        <div class="x-two-q">手机号码</div>
        <div class="x-two-qq">19008876765</div>
        <div class="x-two"></div>
        <div class="x-two-q">所在银行</div>
        <div class="x-two-qq">中国银行苏州分行</div>
        <div class="x-two"></div>
        <div class="x-two-q">所在分支行</div>
        <div class="x-two-qq">中国银行苏州分行园区支行</div>
        <div class="x-two"></div>
        <div class="x-two-q">用户角色</div>
        <div class="x-two-qq">分行或总行管理员</div>
        <div class="x-two"></div>
        <div class="x-three">用户标签（可多选）</div>
        <div class="x-three-q">
            <div class="x-three-qq">
                <input type="checkbox" class="x-three-w">
                <div class="x-three-ww">普惠业务</div>
                <input type="checkbox" class="x-three-ee">
                <div class="x-three-e">大中型企业</div>
            </div>
            <div class="x-three-qq x-three-qqq">
                <input type="checkbox" class="x-three-w">
                <div class="x-three-ww">国际业务</div>
                <input type="checkbox" class="x-three-ee">
                <div class="x-three-e">知识产权质押业务</div>
            </div>
            <div class="x-three-qq x-three-qqq">
                <input type="checkbox" class="x-three-w">
                <div class="x-three-ww">其它</div>
               </div>
        </div>
        <div class="x-three-r"></div>
        <div class="x-two-q">银行系统工号</div>
        <div class="x-two-qq">--</div>
        <div class="x-three-r"></div>
        <div class="x-two-q">是否参与银企对接走访</div>
        <div class="x-four">
        <img src="../../assets/images/dakai (1).png" alt="" class="x-four-q">
        <div class="x-four-w">是</div>
        </div>
        <div class="x-four">
        <img src="../../assets/images/guanbi.png" alt="" class="x-four-q">
        <div class="x-four-w">否</div>
        </div>
        <div class="x-three-r"></div>
        <div class="x-two-q">走访类型</div>
        <div class="x-three-q">
            <div class="x-three-qq">
                <input type="checkbox" class="x-three-w">
                <div class="x-three-ww">企业</div>
                <input type="checkbox" class="x-three-ee">
                <div class="x-three-e">个体工商户</div>
            </div>
        </div>
        <div class="x-three-r"></div>
        <div class="x-five">名片/工牌照片</div>
        <div class="x-five-q">
            <div class="x-five-w"></div>
            <div class="x-five-ww">暂无图片</div>
</div>
<div class="x-three-r"></div>
<div class="x-six">
    <div class="x-six-q">删除</div>
    <div class="x-six-qq">确定修改</div>
    </div>
    </div>

</template>
<script>
export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {},
    /* 2. Vue数据 */
    props: {},
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {};
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created() { },
    mounted() { },
    destroy() { },
    /* 5. Vue方法 */
    methods: {}
};
</script>
<style scoped lang="scss">
.xiugai {
    height: 1500px;
    border: 1px solid red;
overflow: scroll;
    .x-one {
        height: 92px;
        border-bottom: 1px solid #D3DCE2;
        display: flex;
        justify-content: space-between;

        .x-one-q {
            width: 34px;
            height: 18px;
            margin: 61px 0 0 22px;
            font-size: 17px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #181818;
        }

        .x-one-qq {
            margin-top: 61px;
            font-size: 17px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #181818;
        }
    }

    .x-two-q {
        font-size: 15px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #888888;
        margin: 25px 0 0 31px;
        position: relative;
    }

    .x-two-q::before {
        content: '*';
        position: absolute;
        color: #EA7459;
        font-size: 15px;
        top: 2px;
        left: -10px;
    }

    .x-two-qq {
        font-size: 17px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #2C2C2C;
        margin: 12px 0 0 31px;
    }

    .x-two {
        margin: 16px 21px 0 21px;
        border-bottom: 1px solid #E0E1E5;

    }

    .x-three {
        font-size: 15px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #888888;
        margin: 21px 0 0 31px;
    }

    .x-three-q {
        margin: 15px 0 0 33px;
      .x-three-qq{
        display: flex;
        align-items: center;
        .x-three-w{
            width: 16px;
height: 16px;
background: #2981EE;
border-radius: 8px;
        }
        .x-three-ww{
            font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #2C2C2C;
margin-left: 9px;
        }
        .x-three-ee{
            width: 16px;
height: 16px;
background: #FFFFFF;
border-radius: 8px;
margin-left: 81px;  
        }
        .x-three-e{
            font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #2C2C2C;
margin-left: 7px;
        }
      }  
      .x-three-qqq{
        margin-top: 20px;
      }
    }
    .x-three-r{
        border-bottom: 1px solid  #E0E1E5;
        margin: 21px 21px 0 21px;
    }
    .x-three-rr{

    }
    .x-four{
        display: flex;
        margin: 13px 0 0 30px;
        align-items: center;
        .x-four-q{
         width: 36px;   
         height: 24px;
        }
        .x-four-w{font-size: 17px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #2C2C2C;

        }
    }
    .x-five{
        font-size: 15px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #888888;
margin: 19px 0  0 31px;
    }
    .x-five-q{
        width: 121px;
height: 90px;
background: #FFFFFF;
border: 1px solid #E0E1E5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 8px 0 0 31px;
.x-five-w{
    width: 26px;
height: 24px;
background: #989898;

}
.x-five-ww{
    font-size: 11px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #2C2C2C; 
margin-top: 10px;
}
    }
    .x-six{
        display: flex;
        margin: 18px 20px 0 20px;
        .x-six-q{
            width: 130px;
height: 41px;
background: #FFF3F0;
border-radius: 6px;
font-size: 15px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #EA7459;
text-align: center;
line-height: 41px;
        }
        .x-six-qq{
            width: 200px;
height: 41px;
background: #4B91E7;
border-radius: 6px;
font-size: 15px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #FFFFFF;
text-align: center;
line-height: 41px;
margin-left: 17px;
        }
    }
}
</style>